<div class="dy-form">
  <ng-container *ngFor="let group of groupList">
    <form class="dy-form-form" [formGroup]="validateForm" 
      [style.flex-direction]="group.groupForm === '1' ? 'column' : 'row'"
    >
      <div class="sub-title">
        <img [src]="group.groupIcon" alt="">
        <span>{{ group.groupName }}</span>
      </div>

      <ng-container *ngFor="let field of group.groupData">

        <!-- 用户编号 -->
        <app-usage-code style="width: 100%" [isSingleRow]="group.groupForm === '1'"
          *ngIf="field.fieldType === 'userHelp' || field.fieldType === 'masterHelp'"
          [type]="field.fieldType"
          [usageCode]="usageCode"
          [field]="field"
          [usageCodeDisabled]="usageCodeDisabled"
          (usageCodeChange)="usageCodeChange($event)"
        >

        </app-usage-code>

        <!-- 选择器 -->
        <div class="form-ipt" *ngIf="field.fieldType === 'select' || field.fieldType === 'checkbox'" [hidden]="field.visible === 'false'">
          <!-- <span class="require-span" *ngIf="field.required === 'true'">*</span> -->
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          <nz-form-control>
            <nz-select
              style="width: 260px;"
              nzShowSearch
              nzAllowClear
              [nzPlaceHolder]="field.placeholder !== null ? field.placeholder : ''"
              [formControlName]="field.fieldKey"
              (ngModelChange)="selectChange($event, field)"
            >
              <nz-option 
                *ngFor="let item of field.dealData; let i = index" 
                  [nzLabel]="item[field?.fieldData?.data?.labelKey ? field?.fieldData?.data?.labelKey : 'label']" 
                  [nzValue]="item[field?.fieldData?.data?.valueKey ? field?.fieldData?.data?.valueKey : 'value']">
              </nz-option>
            </nz-select>
            <ng-container *ngIf="validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid">
              <app-err-msg
                [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '不能为空'"
              ></app-err-msg>
            </ng-container>
          </nz-form-control>
          <!-- <i *ngIf="field.fieldKey === 'type'"
            style="position: absolute;right: -16px;cursor: pointer;"
            nz-icon nzType="question-circle" nzTheme="outline"
            nz-tooltip [nzTitle]="field.errMsg"
          ></i> -->
        </div>

        <!-- radio 选择器 -->
        <div class="form-ipt" *ngIf="(field.fieldType === 'radio' && field.dealData)" [hidden]="field.visible === 'false'">
          <!-- <span class="require-span" *ngIf="field.required === 'true'">*</span> -->
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          <nz-form-control>
            <nz-select
              style="width: 260px;"
              nzShowSearch
              nzAllowClear
              [nzPlaceHolder]="field.placeholder !== null ? field.placeholder : ''"
              [formControlName]="field.fieldKey"
              (ngModelChange)="selectChange($event, field)"
            >
              <nz-option 
                *ngFor="let item of field.dealData; let i = index" 
                  [nzLabel]="item[field?.fieldData?.data?.labelKey ? field?.fieldData?.data?.labelKey : 'label']" 
                  [nzValue]="item[field?.fieldData?.data?.valueKey ? field?.fieldData?.data?.valueKey : 'value']">
              </nz-option>
            </nz-select>
            <ng-container *ngIf="validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid">
              <app-err-msg
                [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '不能为空'"
              ></app-err-msg>
            </ng-container>
          </nz-form-control>
          <!-- <i *ngIf="field.fieldKey === 'type'"
            style="position: absolute;right: -16px;cursor: pointer;"
            nz-icon nzType="question-circle" nzTheme="outline"
            nz-tooltip [nzTitle]="field.errMsg"
          ></i> -->
        </div>
        <div class="form-ipt" *ngIf="(field.fieldType === 'radio' && (field?.fieldData?.type === 'data' && field?.fieldData?.data.length > 2))" [hidden]="field.visible === 'false'">
          <!-- <span class="require-span" *ngIf="field.required === 'true'">*</span> -->
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          <nz-form-control>
            <nz-select
              style="width: 260px;"
              nzShowSearch
              nzAllowClear
              [nzPlaceHolder]="field.placeholder !== null ? field.placeholder : ''"
              [formControlName]="field.fieldKey"
              (ngModelChange)="selectChange($event, field)"
            >
              <nz-option 
                *ngFor="let item of field?.fieldData?.data; let i = index" 
                  [nzLabel]="item[field?.fieldData?.data?.labelKey ? field?.fieldData?.data?.labelKey : 'label']" 
                  [nzValue]="item[field?.fieldData?.data?.valueKey ? field?.fieldData?.data?.valueKey : 'value']">
              </nz-option>
            </nz-select>
            <ng-container *ngIf="validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid">
              <app-err-msg
                [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '不能为空'"
              ></app-err-msg>
            </ng-container>
          </nz-form-control>
          <!-- <i *ngIf="field.fieldKey === 'type'"
            style="position: absolute;right: -16px;cursor: pointer;"
            nz-icon nzType="question-circle" nzTheme="outline"
            nz-tooltip [nzTitle]="field.errMsg"
          ></i> -->
        </div>
        
        <!-- radio -->
        <div class="form-ipt" *ngIf="(field.fieldType === 'radio' && (field?.fieldData?.type === 'data' && field?.fieldData?.data.length <= 2))" [hidden]="field.visible === 'false'">
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          <nz-form-control>
            <nz-radio-group [formControlName]="field.fieldKey"
              (ngModelChange)="selectChange($event, field)"
            >
              <label nz-radio [nzValue]="item.value" 
                *ngFor="let item of field?.fieldData?.data">{{ item.label }}</label>
            </nz-radio-group>
            <ng-container *ngIf="validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid">
              <app-err-msg
                [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '不能为空'"
              ></app-err-msg>
            </ng-container>
          </nz-form-control>
        </div>

        <!-- 文本框 -->
        <div class="form-ipt" [class.single-row]="isSingleRow" [hidden]="field.visible === 'false'" *ngIf="field.fieldType === 'text'">
          <!-- <span class="require-span" *ngIf="field.required === 'true'">*</span> -->
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          <nz-form-control>
            <input nz-input 
              [formControlName]="field.fieldKey"
              [placeholder]="field.placeholder !== null ? field.placeholder : ''"
            />
            <ng-container *ngIf="validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid">
              <app-err-msg *ngIf="validateForm.get(field.fieldKey)?.errors?.['pattern'];else otherError"
                [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '格式不正确'"
              ></app-err-msg>
              
              <ng-template  #otherError>
                <app-err-msg
                  [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '不能为空'"
                ></app-err-msg>
              </ng-template>
            </ng-container>
          </nz-form-control>
        </div>

        <!-- textarea -->
        <div class="form-ipt" [class.single-row]="isSingleRow" [hidden]="field.visible === 'false'" *ngIf="field.fieldType === 'textarea'">
          <!-- <span class="require-span" *ngIf="field.required === 'true'">*</span> -->
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          <nz-form-control>
            <textarea nz-input placeholder="" [nzAutosize]="{ minRows: 2 }"
              [placeholder]="field.placeholder !== null ? field.placeholder : ''"
              [formControlName]="field.fieldKey"
            >
            </textarea>
            <ng-container *ngIf="validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid">
              <app-err-msg *ngIf="validateForm.get(field.fieldKey)?.errors?.['pattern'];else otherError"
                [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '格式不正确'"
              ></app-err-msg>
              
              <ng-template  #otherError>
                <app-err-msg
                  [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '不能为空'"
                ></app-err-msg>
              </ng-template>
            </ng-container>
          </nz-form-control>
        </div>

        <!-- 数字框 -->
        <div class="form-ipt" [class.single-row]="isSingleRow" [hidden]="field.visible === 'false'" *ngIf="field.fieldType === 'number'">
          <!-- <span class="require-span" *ngIf="field.required === 'true'">*</span> -->
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          <nz-form-control>
            <nz-input-number 
              [nzPlaceHolder]="field.placeholder !== null ? field.placeholder : ''"
              [formControlName]="field.fieldKey" 
              [nzMin]="0" [nzMax]="999999" [nzStep]="1">
            </nz-input-number>

            <ng-container *ngIf="validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid">
              <app-err-msg *ngIf="validateForm.get(field.fieldKey)?.errors?.['pattern'];else otherError"
                [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '格式不正确'"
              ></app-err-msg>
              
              <ng-template  #otherError>
                <app-err-msg
                  [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '不能为空'"
                ></app-err-msg>
              </ng-template>
            </ng-container>
          </nz-form-control>
        </div>

        <!-- 搜索框 -->
        <div class="form-ipt" [hidden]="field.visible === 'false'" *ngIf="field.fieldType === 'searchInput'">
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          <nz-form-control>
            <nz-select
              [nzNotFoundContent]="'如需查找更多，请输入关键字搜索'"
              nzShowSearch
              nzAllowClear
              [nzPlaceHolder]="field.placeholder !== null ? field.placeholder : '请输入关键字'"
              [nzShowArrow]="false"
              [formControlName]="field.fieldKey"
              (nzOnSearch)="onInputSearch($event, field)"
              *ngIf="isDetail==='true'"
            >
              <nz-option *ngFor="let o of field.dealData" [nzLabel]="o.text" [nzValue]="o.value"> </nz-option>
            </nz-select>
            <input nz-input 
              [formControlName]="field.fieldKey"
              [placeholder]="field.placeholder !== null ? field.placeholder : ''"
              *ngIf="isDetail==='false'"
            />
            <ng-container *ngIf="validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid">
              <app-err-msg *ngIf="validateForm.get(field.fieldKey)?.errors?.['pattern'];else otherError"
                [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '格式不正确'"
              ></app-err-msg>
              
              <ng-template  #otherError>
                <app-err-msg
                  [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '不能为空'"
                ></app-err-msg>
              </ng-template>
            </ng-container>
          </nz-form-control>
        </div>

        <!-- 级联选择 -->
        <div class="form-ipt" [hidden]="field.visible === 'false'"  *ngIf="field.fieldType === 'reactSelect'">
          <!-- <span class="require-span" *ngIf="field.required === 'true'">*</span> -->
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          <nz-form-control>
            <nz-cascader [formControlName]="field.fieldKey"
              [nzPlaceHolder]="field.placeholder !== null ? field.placeholder : ''"
              [nzOptions]="field.dealData"
              [nzLabelProperty]="field?.fieldData?.data?.labelKey"
              [nzValueProperty]="field?.fieldData?.data?.valueKey"
              (ngModelChange)="reactSelectChange($event, field)"
            >
            </nz-cascader>
            <app-err-msg *ngIf="validateForm.get('userAddr')?.dirty && validateForm.get('userAddr')?.invalid"
              errMsg="用户地址不能为空"
            ></app-err-msg>
          </nz-form-control>
        
        </div>

        <!-- switch -->
        <div class="form-ipt" [hidden]="field.visible === 'false'"  *ngIf="field.fieldType === 'switch'">
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          <nz-form-control>
            <nz-switch [formControlName]="field.fieldKey"
              (ngModelChange)="selectChange($event, field)"
            ></nz-switch>
            <ng-container *ngIf="validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid">
              <app-err-msg
                [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '不能为空'"
              ></app-err-msg>
            </ng-container>
          </nz-form-control>
        </div>

        <div class="form-ipt" [hidden]="field.visible === 'false'"  *ngIf="field.fieldType === 'calendar'">
          <!-- <span class="require-span" *ngIf="field.required === 'true'">*</span> -->
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          
          <nz-form-control>
            <nz-date-picker [formControlName]="field.fieldKey"
              (ngModelChange)="onDateChange($event, field)">
            </nz-date-picker>

            <ng-container *ngIf="validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid">
              <app-err-msg
                [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '不能为空'"
              ></app-err-msg>
            </ng-container>
          </nz-form-control>
        </div>
        
        <div class="form-ipt" [hidden]="field.visible === 'false'"  *ngIf="field.fieldType === 'date'">
          <!-- <span class="require-span" *ngIf="field.required === 'true'">*</span> -->
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          
          <nz-form-control>
            <nz-date-picker [formControlName]="field.fieldKey"
              (ngModelChange)="onDateChange($event, field)">
            </nz-date-picker>

            <ng-container *ngIf="validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid">
              <app-err-msg
                [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '不能为空'"
              ></app-err-msg>
            </ng-container>
          </nz-form-control>
        </div>

        <!-- 银行 -->
        <div class="form-ipt" [hidden]="field.visible === 'false'" *ngIf="field.fieldType === 'bank'">
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >银行账号</nz-form-label>
          <nz-form-control>
            <input nz-input 
              [formControlName]="'account'"
              [placeholder]="field.placeholder !== null ? field.placeholder : '银行账号'"
              (ngModelChange)="accountChange($event)"
            />
            <ng-container *ngIf="validateForm.get('account')?.dirty && validateForm.get('account')?.invalid">
              <app-err-msg
                [errMsg]="field.errMsg ? field.errMsg : '银行账号不能为空'"
              ></app-err-msg>
            </ng-container>
          </nz-form-control>
        </div>
        <div class="form-ipt" [hidden]="field.visible === 'false'" *ngIf="field.fieldType === 'bank'">
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >开户银行</nz-form-label>
          <nz-form-control>
            <nz-select
              nzShowSearch
              nzServerSearch
              nzPlaceHolder="请输入开户银行"
              nzAllowClear
              formControlName="bankId"
              (nzOnSearch)="bankSearch($event)"
              [nzNotFoundContent]="'未查找到开户银行，请检查银行账号'"
              [nzLoading]="bankIsLoading"
              (ngModelChange)="onBankChange($event)"
              *ngIf="isDetail === 'true'"
            >
              <nz-option *ngFor="let bank of bankList" [nzLabel]="bank?.bankName" [nzValue]="bank.bankId"> </nz-option>
            </nz-select>
            <input nz-input 
              [formControlName]="'bankId'"
              [placeholder]="field.placeholder !== null ? field.placeholder : '银行账号'"
              (ngModelChange)="accountChange($event)"
              *ngIf="isDetail === 'false'"
            />
            <ng-container *ngIf="validateForm.get('bankId')?.dirty && validateForm.get('bankId')?.invalid">
              <app-err-msg
                [errMsg]="field.errMsg ? field.errMsg : '开户银行不能为空'"
              ></app-err-msg>
            </ng-container>
          </nz-form-control>
        </div>

        <!-- 文件上传 -->
        <div class="form-ipt" style="width: 100%;" *ngIf="field.fieldType === 'upload'"
          [hidden]="field.visible === 'false'" 
        >
          <!-- <app-file-input style="width: 100%;"
            
             
            
          >

          </app-file-input> -->
          <app-file-upload style="width: 100%"
            [setId]="setId"
            [isBusinessBill]="setId === '27' || setId === '25' || setId === '24' || setId === '26' || setId === '28'"
            [title]="field.fieldName"
            [subTitle]="field.placeholder ? field.placeholder : '请上传相关文件'"
            (uploadBack)="uploadBack($event, field.fieldKey)"
            [mediaType]="field.fieldCustom?.fileType | dealMediaType"
            [fileNum]="field.fieldCustom?.fileNum"
            [required]="field.required"
            [previewIdStr]="field.defaultValue"
            [uploadAvailable]="uploadAvailable"
            [deleteAvailable]="uploadAvailable"
            [eCertificateObj]="field?.fieldCustom?.customBtn"
            [groupForm]="validateForm"
            [errMsg]="(validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid) ? '请上传相关文件' : ''"
          ></app-file-upload>
        </div>

        <!-- 地图组件 -->
        <div class="form-ipt" [hidden]="field.visible === 'false'"  *ngIf="field.fieldType === 'mapCoordinate'">
          <nz-form-label [nzNoColon]="true" [title]="field.fieldName"
            [nzRequired]="field.required === 'true'"
          >{{ field.fieldName }}</nz-form-label>
          <nz-form-control>
            <!-- <nz-switch [formControlName]="field.fieldKey"
              (ngModelChange)="selectChange($event, field)"
            ></nz-switch> -->
            <app-my-map (locationInfo)="getLocationInfo($event, field.fieldKey)"></app-my-map>
            <ng-container *ngIf="validateForm.get(field.fieldKey)?.dirty && validateForm.get(field.fieldKey)?.invalid">
              <app-err-msg
                [errMsg]="field.errMsg ? field.errMsg : field.fieldName + '不能为空'"
              ></app-err-msg>
            </ng-container>
          </nz-form-control>
        </div>
        
      </ng-container>
      
    </form>
  </ng-container>
  
  <div class="form-btn" *ngIf="userInfo.userId">

    <div class="apply" *ngIf="needKnowContent" >
      <label nz-checkbox 
        [ngModel]="validateForm.get(applyAgreeKey)?.value"
        (ngModelChange)="onAgreeChange($event)"
        *ngIf="isDetail !== 'false'"
      ></label>
      <button nz-button nzType="link" (click)="showApply()">申请须知</button>
    </div>

    <button class="sign" 
      [nzLoading]="btnLoading" 
      [disabled]="disableBtn" 
      type="button" nz-button nzType="dashed" 
      (click)=showSignModal()
      *ngIf="signKey && isDetail === 'true'"
    >签名</button>

    <div class="notPreview" *ngIf="submitBtnVisible">
      <button [nzLoading]="btnLoading" [disabled]="disableBtn" type="button" nz-button nzType="default" (click)=onReset()>取消</button>
      <button [nzLoading]="btnLoading" [disabled]="disableBtn" type="button" nz-button nzType="primary" (click)="onSubmit()">提交</button>
    </div>

    <div class="preview" *ngIf="!submitBtnVisible">
      <button nz-button (click)="doBack()">返回</button>
    </div>
  </div>

  <nz-empty *ngIf="!userInfo.userId"></nz-empty>
</div>

<nz-modal
  [nzTitle]="'申请须知'"
  [nzVisible]='applyModalVisible'
  [nzOkText]="'同意'"
  [nzContent]="applyContent"
  [nzWidth]="800"
  [nzStyle]="{ top: '16px' }"
  (nzOnCancel)="applyCancel()"
  (nzOnOk)="applyAgree()"
  [nzClosable]="false"
  [nzMaskClosable]="false"
>
</nz-modal>
<ng-template #applyContent>
  <div style="height: 400px;overflow-y: scroll;" [innerHTML]="needKnowContent"></div>
</ng-template>

<!-- 签名 -->
<!-- <app-sign
  [(signModalVisible)]="signModalVisible"
  (signChange)="onSignChange($event)"
  (signData)="signDataChange($event)"
>
</app-sign> -->
